<template>
	<div>
		<van-swipe :autoplay="3000" style="height: 6.5rem;">
			<van-swipe-item v-for="(image, index) in images" :key="index"><img v-lazy="image" /></van-swipe-item>
		</van-swipe>
		<div class="index-main">
			<div class="corners-div"></div>
			<div style="margin: 0 0.6rem;">
				<van-notice-bar :text="noticeText" color="#0a2549" style="border-radius: 15px;margin-bottom: 0.3rem;" background="#dfeffe" left-icon="volume-o" />
				<form action="/">
					<van-search v-model="searchContent" placeholder="请输入充电站名称" show-action shape="round" @search="onSearch" left-icon="">
						<div slot="action" @click="onSearch"><i class="van-icon icon iconfont icon-sousuo"></i></div>
					</van-search>
				</form>
				<draggable
					class="van-grid"
					:options="{ group: 'people', animation: 150, ghostClass: 'sortable-ghost', chosenClass: 'chosenClass', scroll: true, scrollSensitivity: 200 }"
					v-model="indexList"
					@change="change"
					@start="start"
					@end="end"
					:move="move"
				>
					<div v-for="(item, index) in indexList" :key="index" class="van-grid-item" style="flex-basis: 25%;">
						<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
							<i :class="['van-icon', 'icon', 'iconfont', item.iconName]">
								<div class="van-info" v-if="item.info">{{ item.info }}</div>
							</i>
							<span class="van-grid-item__text">{{ item.text }}</span>
						</div>
					</div>
				</draggable>
			</div>
			<div style="height: 5px;background: #ebeffb;"></div>
			<div class="van-grid" style="margin: 0 0.6rem;">
				<div class="van-grid-item" style="flex-basis: 25%;">
					<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
						<i class="icon iconfont icon-guzhangbaoxiu"></i>
						<span class="van-grid-item__text">故障报修</span>
					</div>
				</div>
				<div class="van-grid-item" style="flex-basis: 25%;">
					<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
						<i class="icon iconfont icon-lianxikefu"></i>
						<span class="van-grid-item__text">联系客服</span>
					</div>
				</div>
				<div class="van-grid-item" style="flex-basis: 25%;">
					<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
						<i class="icon iconfont icon-guanyuwomen"></i>
						<span class="van-grid-item__text">关于我们</span>
					</div>
				</div>
			</div>

			<div class="charging-btn theme-background">
				<i class="point"></i>
				<div>
					<span>正在充电中</span>
					<label>已充电量 60%</label>
				</div>
				<van-icon name="play" color="#39c7f7" style="vertical-align: middle;" />
			</div>
		</div>
		<w-tabbar @change="onChange"></w-tabbar>
	</div>
</template>

<script>
import draggable from 'vuedraggable';
import { getLocalStorage } from '@/utils/auth';
import {getPageList,notice} from '../../api/index.js'

export default {
	components: {
		draggable
	},
	data() {
		return {
			images: [],
			icon: 'icon',
			iconfont: 'iconfont',
			searchContent: '',
			noticeText: '',
			indexList: [
				{
					text: '充值',
					iconName: 'icon-chongzhi',
					oldIndex: 0
				},
				{
					text: '我的订单',
					iconName: 'icon-wodedingdan',
					oldIndex: 1
				},
				{
					text: '充值记录',
					iconName: 'icon-chongzhijilu',
					oldIndex: 2
				},
				{
					text: '我的消息',
					iconName: 'icon-wodexiaoxi',
					info: 9,
					oldIndex: 3
				},
				{
					text: '优惠劵',
					iconName: 'icon-youhuiquan',
					oldIndex: 4
				},
				{
					text: '我的月卡',
					iconName: 'icon-wodeyueka',
					oldIndex: 5
				},
				{
					text: '常用设备',
					iconName: 'icon-changyongshebei',
					oldIndex: 6
				},
				{
					text: '更多',
					iconName: 'icon-gengduo',
					oldIndex: 7
				}
			]
		};
	},
	methods: {
		onChange(index) {},
		onSearch() {
			console.log(121221);
		},
		//evt里面有两个值，一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
		change: function(evt) {
			// console.log(evt);
		},
		//start ,end ,add,update, sort, remove 得到的都差不多
		start: function(evt) {
			// console.log(evt);
		},
		end: function(evt) {
			for (let i in this.indexList) {
				if (evt.item.innerText === this.indexList[i].text) {
					this.indexList[i].oldIndex = evt.newIndex;
				}
			}
			this.$store.commit('getList', this.indexList);
			console.log(evt);
			// evt.item; //可以知道拖动的本身
			// evt.to; // 可以知道拖动的目标列表
			// evt.from; // 可以知道之前的列表
			// evt.oldIndex; // 可以知道拖动前的位置
			// evt.newIndex; // 可以知道拖动后的位置
		},
		move: function(evt, originalEvent) {
			// console.log(evt);
			// console.log(originalEvent); //鼠标位置
		},
		setIndexPage() {
			this.getIndexList()
			this.getList();
			this.getNews();
		},
		getIndexList() {
			const t = this;
			let indexList = [];
			getPageList({
					pageIndex: 1,
					pageSize: 8,
					disabled: false
				})
				.then(res => {
					if (res.success) {
						for (let i in res.data) {
							let list = {
								text: res.data[i].name,
								iconName: res.data[i].iconUrl,
								oldIndex: res.data[i].apSort
							};
							indexList.push(list);
						}
						this.$store.commit('getList', indexList);
					} else {
						this.$toast(res.message);
					}
				});
		},
		getList() {
			const t = this;
			getPageList({
					pageIndex: 1,
					pageSize: 3,
					adSort: 1,
					disabled: false
				})
				.then(res => {
					if (res.success) {
						for (let i in res.data) {
							t.images.push(res.data[i].imageUrl);
						}
						console.log(this.images);
					} else {
						this.$toast(res.message);
					}
				});
		},
		getNews() {
			notice({
					pageIndex: 1,
					pageSize: 3,
					disabled: false
				})
				.then(res => {
					if (res.success) {
						const newsList = [];
						for (let i in res.data) {
							newsList.push(res.data[i].content);
						}
						this.noticeText = newsList.join('      ');
					} else {
						this.$toast(res.message);
					}
				});
		}
	},
	mounted() {
		this.setIndexPage(); 
		this.indexList = getLocalStorage('indexList');
	},
	created() {}
};
</script>

<style lang="scss" scoped>
.index-main {
	position: relative;
	margin-bottom: 3rem;
}
.van-grid-item__content {
	background: none;
	.van-grid-item__text {
		color: #2d4564;
		margin-top: px2rem(5);
	}
	.icon {
		color: #1989fa;
		font-size: px2rem(20);
	}
}
.van-grid-item__content::after {
	border-width: 0;
}
.rounded-div {
	height: 0.75rem;
	border-radius: 50px;
	position: absolute;
	left: 0px;
	right: 0px;
	top: -1.5rem;
	z-index: 10;
	background: rgb(243, 247, 254);
}
.corners-div {
	height: 0.8rem;
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	background: #f3f7fe;
	border-radius: 156px;
}
.van-swipe /deep/ {
	.van-swipe__indicators {
		bottom: 34px;
		left: 8%;
	}
	.van-swipe__indicator--active {
		background: #3b80ea !important;
	}
	.van-swipe__indicator {
		background: #d6dae6;
	}
	.van-swipe__indicator--active {
		width: 25px;
		border-radius: 25px;
	}
}
.van-search /deep/ .van-search__content {
	background: none;
}
.van-grid-item__text {
	color: #0a2549;
}
.van-search {
	border-radius: 8px;
}

.charging-btn {
	position: fixed;
	z-index: 10;
	right: 0;
	bottom: 18%;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	color: #fff;
	padding: 0.1rem 0.4rem;
	padding-right: 0.2rem;
	div {
		vertical-align: middle;
		margin-left: px2rem(10);
	}
	span {
		display: block;
		font-size: px2rem(14);
	}
	label {
		display: block;
		font-size: px2rem(12);
	}
	* {
		display: inline-block;
	}
}
.point {
	margin-bottom: 0.3rem;
	background: #39c7f7;
}

// .com {
// 	font-size: px2rem(12);
// 	width: px2rem(1920);
// 	height: 20%;
// 	color: $red;
// 	background-color: #222222;
// 	@include flex();
// }
</style>
